<template xmlns:th="http://www.w3.org/1999/xhtml">

  <div>
    <div @click="fly('/')">首页</div>
    <el-form>
      <div>
        <el-upload
            class="avatar-uploader"
            action="http://localhost:8090/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="user.img" :src="require('@/assets/'+user.img)" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

      </div>
      <el-form-item label="姓名">
        <el-input v-model="user.name">
        </el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="user.sex">
        </el-input>
      </el-form-item >
      <el-form-item label="地址">
        <el-input v-model="user.address">
        </el-input>
      </el-form-item >
      <el-form-item label="手机号码">
        <el-input v-model="user.phone">
        </el-input>
      </el-form-item >
    </el-form>
    <el-button @click="sub">提交修改</el-button>
  </div>

</template>

<script>
export default {
  data()
  {
    let result = this.$route.query.id;
    return{
      img:null,
      Id:result,
      user:{}
    }
  },
  mounted() {
    this.load();
  },
  methods:
      {
        async load()
        {
          let result =await this.$axios.get('/userId/'+this.Id)
          this.user=result.data

        },
        async sub()
        {
          console.log(this.user)
          let result= await this.$axios.post('/userupd',this.user)
          console.log(result.data)
          this.$router.push('/')
        },
        //返回图片存储的路径
        handleAvatarSuccess(response, file) {
          // 图片上传成功的处理逻辑
          const url=file.raw.name
          this.user.img = url

        },
        beforeAvatarUpload(file) {
          // 在上传之前的处理逻辑，例如文件大小限制、文件类型限制等
          const isJPG = file.type === 'image/jpeg';
          const isPNG = file.type === 'image/png';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!(isJPG || isPNG)) {
            this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
          }

          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }

          return (isJPG || isPNG) && isLt2M;
        }
      }
}
</script>

<style scoped>

</style>